<template>
  <div class="setting-item-wrapper">
    <div class="setting-item box-shadow">
      <div class="icon-wrapper">
        <div class="icon">
          <slot name='icon'></slot>
        </div>
      </div>
      <div class="content">
        <!-- <div class="title">
          <span>
            <span>已绑定手机号:</span><span>修改</span>
          </span>
          <span>
            <span>手机未绑定:</span><span>绑定</span>
          </span>
        </div>
        <div class="instruction">
          获取事实时验证码方式，保证账户资金安全。
        </div> -->
        <slot name="text"></slot>
      </div>
    
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          isPhoneNumBind: true,
          bindNo: '134***7788',
          instruction: '获取事实时验证码方式，保证账户资金安全。',
          bindTitle: 'yi'
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .setting-item
    display flex 
    align-items center
    border-radius 3px 
    background $color-text-button
    border 1px solid $color-divide-line
    padding 26px 0
    .icon-wrapper 
      margin 0 20px 
      .icon 
        width 36px 
        height 36px 
        border-radius 50% 
        background $color-theme-red 
        display flex 
        align-items center 
        justify-content center
        .iconfont 
          font-size 18px 
          color #fff


    .text 
      display flex 
      height 100%
      flex-direction column
      align-items space-between
    
    
</style>
 